<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<title>分享模板</title>
		<link rel="stylesheet" type="text/css" href="css/public.css" />
		<link rel="stylesheet" type="text/css" href="css/animate.css" />
	</head>
	<style type="text/css">
	body {
			background: url(img/bg.jpg);
		}
		
		.head {
			height: 6rem;
			position: relative;
		}
		
		.head img {
			position: absolute;
		}
		
		.templatebox {
			height: 4rem;
			width: 3.5rem;
			margin-left: 0.2rem;
			float: left;
			margin-top: 0.2rem;
		}
		
		.item {
			height: 4rem;
			width: 2.9rem;
			border: solid 1px #000;
			border-radius: 5px;
			background: #79cbed;
		}
		
		.templatebox img {
			height: 0.43rem;
			width: auto;
			margin-top: 3.5rem;
			margin-left: 0.1rem;
		}
		
		.item img {
			width: 2.7rem;
			height: 3.9rem;
			margin: 0;
			background: url('') no-repeat center #79cbed;
		}
	}
	</style>

	<body>
		<div class="head">
			<img src="img/share.png" class="wow bounceInLeft" data-wow-delay=".1s"  style="width: 4.2rem;height: auto;position: absolute;top: 0.9rem;left: 1.45rem;"/>
			<img src="img/xuanz.png" class="wow bounceInLeft" data-wow-delay=".2s" style="width: 4.3rem;height: auto;position: absolute;top: 2.6rem;left: 1.2rem;" />
			<img src="img/updata.png"  class="wow bounceInLeft" data-wow-delay=".3s" style="width: 1.68rem;height: auto;position: absolute;top: 3.35rem;left: 2.6rem;"/>
			<img src="img/bottom (1).png" class="wow bounceInLeft" data-wow-delay=".4s" style="width: 7.5rem;height: auto;position: absolute;bottom: 0;left: 0rem;"/>
		</div>
		<div class="container">
			<div class="templatebox flex">
				<div class="item flex flex-align-center flex-pack-center">
					<img src="img/blank.gif" data-echo="img/4.jpg" />
				</div>
				<img src="img/uncheked_03.png" data-tempkey='4' />
			</div>
			<div class="templatebox flex">
				<div class="item flex flex-align-center flex-pack-center">
					<img src="img/blank.gif" data-echo="img/6.jpg" />
				</div>
				<img src="img/uncheked_03.png" data-tempkey='6' />
			</div>
			<div class="templatebox flex">
				<div class="item flex flex-align-center flex-pack-center">
					<img src="img/blank.gif" data-echo="img/2.jpg" />
				</div>
				<img src="img/uncheked_03.png" data-tempkey='2' />
			</div>
			<div class="templatebox flex">
				<div class="item flex flex-align-center flex-pack-center">
					<img src="img/blank.gif" data-echo="img/7.jpg" />
				</div>
				<img src="img/uncheked_03.png" data-tempkey='7' />
			</div>
			<div class="templatebox flex">
				<div class="item flex flex-align-center flex-pack-center">
					<img src="img/blank.gif" data-echo="img/8.jpg" />
				</div>
				<img src="img/uncheked_03.png" data-tempkey='8' />
			</div>
			<div class="templatebox flex">
				<div class="item flex flex-align-center flex-pack-center">
					<img src="img/blank.gif" data-echo="img/3.jpg" />
				</div>
				<img src="img/uncheked_03.png" data-tempkey='3' />
			</div>
			<div class="templatebox flex">
				<div class="item flex flex-align-center flex-pack-center">
					<img src="img/blank.gif" data-echo="img/19.jpg" />
				</div>
				<img src="img/uncheked_03.png" data-tempkey='19' />
			</div>
			<div class="templatebox flex">
				<div class="item flex flex-align-center flex-pack-center">
					<img src="img/blank.gif" data-echo="img/17.jpg" />
				</div>
				<img src="img/uncheked_03.png" data-tempkey='17' />
			</div>
			<div class="templatebox flex">
				<div class="item flex flex-align-center flex-pack-center">
					<img src="img/blank.gif" data-echo="img/18.jpg" />
				</div>
				<img src="img/uncheked_03.png" data-tempkey='18' />
			</div>
			<div class="templatebox flex">
				<div class="item flex flex-align-center flex-pack-center">
					<img src="img/blank.gif" data-echo="img/15.jpg" />
				</div>
				<img src="img/uncheked_03.png" data-tempkey='15' />
			</div>
			<div class="templatebox flex">
				<div class="item flex flex-align-center flex-pack-center">
					<img src="img/blank.gif" data-echo="img/16.jpg" />
				</div>
				<img src="img/uncheked_03.png" data-tempkey='16' />
			</div>
			<div class="templatebox flex">
				<div class="item flex flex-align-center flex-pack-center">
					<img src="img/blank.gif" data-echo="img/14.jpg" />
				</div>
				<img src="img/uncheked_03.png" data-tempkey='14' />
			</div>
			<div class="templatebox flex">
				<div class="item flex flex-align-center flex-pack-center">
					<img src="img/blank.gif" data-echo="img/20.jpg" />
				</div>
				<img src="img/uncheked_03.png" data-tempkey='20' />
			</div>
			<div class="templatebox flex">
				<div class="item flex flex-align-center flex-pack-center">
					<img src="img/blank.gif" data-echo="img/1.jpg" />
				</div>
				<img src="img/uncheked_03.png" data-tempkey='1' />
			</div>
			<div class="templatebox flex">
				<div class="item flex flex-align-center flex-pack-center">
					<img src="img/blank.gif" data-echo="img/13.jpg" />
				</div>
				<img src="img/uncheked_03.png" data-tempkey='13' />
			</div>
			<div class="templatebox flex">
				<div class="item flex flex-align-center flex-pack-center">
					<img src="img/blank.gif" data-echo="img/22.jpg" />
				</div>
				<img src="img/uncheked_03.png" data-tempkey='22' />
			</div>
			<div class="templatebox flex">
				<div class="item flex flex-align-center flex-pack-center">
					<img src="img/blank.gif" data-echo="img/21.jpg" />
				</div>
				<img src="img/uncheked_03.png" data-tempkey='21' />
			</div>
			<div class="templatebox flex">
				<div class="item flex flex-align-center flex-pack-center">
					<img src="img/blank.gif" data-echo="img/5.jpg" />
				</div>
				<img src="img/uncheked_03.png" data-tempkey='5' />
			</div>
			<div class="templatebox flex">
				<div class="item flex flex-align-center flex-pack-center">
					<img src="img/blank.gif" data-echo="img/12.jpg" />
				</div>
				<img src="img/uncheked_03.png" data-tempkey='12' />
			</div>
			<div class="templatebox flex">
				<div class="item flex flex-align-center flex-pack-center">
					<img src="img/blank.gif" data-echo="img/11.jpg" />
				</div>
				<img src="img/uncheked_03.png" data-tempkey='11' />
			</div>
			<div class="templatebox flex">
				<div class="item flex flex-align-center flex-pack-center">
					<img src="img/blank.gif" data-echo="img/9.jpg" />
				</div>
				<img src="img/uncheked_03.png" data-tempkey='9' />
			</div>
			<div class="templatebox flex">
				<div class="item flex flex-align-center flex-pack-center">
					<img src="img/blank.gif" data-echo="img/10.jpg" />
				</div>
				<img src="img/uncheked_03.png" data-tempkey='10' />
			</div>
		</div>
	</body>
	<script src="//cdn1.lncld.net/static/js/3.2.1/av-min.js"></script>
	<script type="text/javascript" src="js/api.js"></script>
	<script type="text/javascript" src="js/zepto.js"></script>
	<script type="text/javascript" src="js/layer.js"></script>
	<script type="text/javascript" src="js/rem.js"></script>
	<script type="text/javascript" src="js/wow.min.js"></script>
	<script type="text/javascript" src="js/echo.min.js"></script>
	<script type="text/javascript">
		echo.init();
		wow = new WOW({　
			animateClass: 'animated',
			offset: 0,
			mobile: true,
			live: true
		});
		wow.init();
		// 判断是否为微信浏览器
		function is_wechat(){
			var ua = window.navigator.userAgent.toLowerCase();
			if (ua.match(/MicroMessenger/i) == 'micromessenger') { 
		        return true; 
		    }else{
		    	return false;
		    }
		}
		// 获取浏览器字符串
		function GetQueryString(name){
				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
				var r = window.location.search.substr(1).match(reg);
				if(r != null)
					return decodeURI(r[2]);
				return null;
		}
		//若不是微信端 则将localStorage.userId更新
		if(!is_wechat()){
			localStorage.userId = GetQueryString('userId');
		}
		//切换皮肤
		$('.templatebox img').on('click', function() {
			if($(this).attr('src') == 'img/uncheked_03.png') {
				var tempkey = $(this).data('tempkey').toString();
				layer.open({
					content: '是否确定使用该分享模板',
					btn: ['确定', '取消'],
					yes: function(index) {
						//将用户所选模板id存入云端;
						var query = new AV.Query('shareTable');
							query.equalTo('userId', localStorage.userId);
						query.find().then(function(res) {
							console.log(res);
							if(res == '') { //该用户未选过模板 添加
								var Todo = AV.Object.extend('shareTable'); //创建leancloud实例
								var todo = new Todo();
								todo.set('userId', localStorage.userId.toString());
								todo.set('userKey', tempkey);
								todo.save().then(function(res) {
									window.location.href = 'share.html?userId=' + localStorage.userId;
								}, function(err) {});
							} else { //该用户已选择过 更新
								var res = Util.Parse(res);
								var todo = AV.Object.createWithoutData('shareTable', res[0].objectId);
								todo.set('userKey', tempkey);
								todo.save().then(function(res) {
									window.location.href = 'share.html?userId=' + localStorage.userId;
								});
							}
						}, function(error) {});
						layer.close(index);
					}
				});
				$(this).attr('src', 'img/cheked_03.png').parent('.templatebox').siblings().children('img').attr('src', 'img/uncheked_03.png');
			}
		});
	</script>

</html>